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(57) Abstract: A graphical user interface for a display devised for presentation of hierarchical information, comprising a first menu 
field (I) carrying a list of menu items (2), at least one of said menu items indicating a submenu field which is expandable within said 
first menu tleld. A graphical layer effect (4) is applied to an expanded submenu field such that said submenu field is displayed as an 
underlying layer (3 ) to the first menu field. Said graphical effect may comprise the visualisation of an edge (4) between displayed 
layers or a shadow (4) on an underlying layer from an overlying layer. Preferably, an expanded submenu field, located between two 
menu items, the first menu field is displayed as being separated into two tlrst menu fields (1 A, IB) revealing said underlying layer 
there between. 
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GRAPHICAL USER INTERFACE FOR EXPANDABLE MENUS 



Field of the invention 
5 The present invention relates generajly to graphical user interfaces 

presentable on displays for e.g. computers, television sets and so on. The invention 
is however particularly suitable for small displays, such as those used in cellular or 
mobile phones, and offers an improved solution for displaying and navigatkig in 
menus in a comprehensible manner. 

10 . 
Background 

Since the end of the 2000*^ century the cellular telephone mdustry has had 
enormous development in the world. The first commercially attractive cellulai* 
telephones or terminals were introduced in the market at the end of the 1980's. 

1 5 Since then, a lot of effort has been made in making smaller terminals, with much 
help from the miniaturisation of electronic components and the development of 
more efficient batteries. Today, nxmierous manufacturers offer pocket-sized 
terminals with a wide variety of capabilities and services, such as packet-oriented 
transmission and multiple radio band coverage. 

20 The development in electronics has come to the point where a further 

miniaturisation of the terminals might cause some drawbacks - not the size itself but 
the capability to handle the keypad and reading the display. However, the display 
has in fact become larger and larger at the same time as the size of the total tenninal 
has decreased. For several years it has been expected that the design of the terminals 

25 will become more alike the small pocket computers known as personal digital 
assistants (PDA), with only few buttons or keys and a large display substantially 
covering the entire front side of the tenninal. In any case, the tenninal display will 
still be quite small and therefore not suitable for presentation of large volumes of 
data. Still, already today die terminals are quite capable and have a lot of technical 

30 functions and can be used for many different services. In order to navigate through 
the different options and actions that are selectable, the terminals are generally 
devised with some form of menu information system. When browsing through such 
menus more text than fits the screen must generally still be viewed. Furthermore, in 
many cases the menu items themselves are sub-menus in which further browsing 

35 can be made. When the display is very small, which would still be the case even if 
the display would cover the entire front-side of the phone, it is not possible to 
expand menus horizontally more than maybe a few pixels. Most menus for portable 
terminals therefore expand vertically or open up hito a whole new screen mode. 
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One problem with drop-down menus is that they cover what is beneath them 
when they unfold. Most times the menu-items of terminal menu are arranged in the 
order of expected frequency of use. This means tiiat when the menu drops down to 
expand it covers items which are frequently used i.e. those immediately below the 
5 expanded menu item, but leaves the not so frequently used menu items further down 
the list still visible. Another problem with drop down menus is that there is no 
hierarchical feeling visualising the interdependence between the different menus, 
and no good way to present several drop-downs within each other. 

US 5801703 disclose a method and an apparatus for selectable expandable 
10 menus for computers. According to the proposed solution, expanded menu panels 
within a given master menu are expanded in place, leaving the relative order of 
menu items intact. However, the sub-menus or expanded menu items are simply 
presented oh a larger space in the main menu without a clear identification of the 
hierarchical structure. 

15 

Summary of the invention 

Consequently it is an object of the present invention to overcome the above- 
identified deficiencies related to the identified field and to the prior art thereof. 
More specifically, it is an object of the invention to provide an improved solution 

20 for expandable menus suitable for small displays. 

According to a first aspect of the mvention, this object is ftilfiUed by a 
graphical user mterface for a display devised for presentation of hierarchical 
information, which user interface comprises a first menu field carrying a list of 
menu items, at least one of said menu items indicating a sub-menu field which is 

25 e>qpandable within said first menu field. The user interface fiirther comprises a 

graphical layer effect, which is applied to an expanded sub-menu field, such that the 

« 

sub-menu field is displayed as an underlying layer to the first menu field. This 
provides an improved solution for displaying menus, particularly on small displays, 
without distorting the sense of hierarchy between two or more menus. 

30 Preferably, the graphical user interface is devised such that for an expanded 

submenu field, located between two menu items, the first menu field is displayed as 
being separated into two first menu fields revealing said underlying layer there 
between. This way, the submenu will not cover the first main menu. 

In one embodiment the graphical effect comprises the visualisation of an 

35 edge between displayed layers. This gives a user or viewer of the display a fiuther 
improved sense of the menu hierarchy, by presentation of a submenu as a lying 
under the first main menu and thus providing a level effect. Optionally or 
additionally, the graphical effect may comprise the visuaUsation of a shadow on an 



BNSOOCIO: <WO 



.O3104864A2J_> 



1 



wo 03/104964 PCT/EP03/05842 

3 

underlying layer from an overlying layer, which also creates or enhances the level 

effect between the menus. 

In one embodiment a displayed overlying layer is defined by a field enclosed 
by a contour having rounded comers. Optionally or additionally a displayed 
5 overlying layer may be defined by a field enclosed by a contour having comers with 
an iimer angle of more than 90°. A graphical user interface is generally looked upon 
as, an is indeed designed to be, an illustration of a physical stracture, e.g. in the case 
of menus as a pile of papers or files. Furthermore, such physical objects rarely have 
comers that are more sharp than 90°. Rather, if such comers are not straight, they 
10 are generally slightly roimded or at least less sharp than 90°. For a viewer it is 
therefore natural to perceive a field according to this embodiment as the higher 
level. 

The menu item for an expanded submenu field may fiorther be displayed in 
the imderlying layer of the submenu field. This provides an improved connection 

1 5 between the menus . 

Preferably, the parameter headings in said fixst menu field are arranged in an 
order determined by frequency of use. This way, if the display is smaller than the 
expanded menu, the menu items of less significance, located imder an opened 
submenu, are shifted downwards and out of the display upon expansion rather than 
20 the upper more significant items. 

In one embodiment a selection indicator comprises a contour formed around 
a selected menu item in a list, and a graphical layer effect to said contom, e.g. 

according to the above. 

Furthermore, the graphical user interface may comprise an item triggering 
25 field wliich can be activated to trigger an action associated with a menu item 

selected by said selection indicator. 

According to a second aspect, the present invention fiilfils the stated objects 

by a graphical interface system, which comprises a display connected to a 

microprocessor unit, and a computer program including computer program code. 
30 According to the invention the computer program code will, when executed by the 

microprocessor unit, trigger the microprocessor unit to present, on said display, the 

graphical user interface as described above. 

According to a third aspect of the iavention, the objects stated are finther 

fiilfilled by a computer program product for a graphical user interface system, 
35 which system comprises a micro-processor unit and a display, wherein said 

computer program product includes the computer program code as mentioned 

above. 
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According to a fourth aspect the present invention relates to a portable 
communication terminal comprising a display and means for executing 
presentations on said display of the graphical user interface according to the above. 

5 Brief description of the drawings 

The features and advantages of the present invention will be more 
apparent from the following description of the preferred embodiments with 
reference to the accompanying drawings, on which 

Figs la-lc schematically illustrates a graphical user interface according 
10 to an embodiment of the present invention; 

Figs 2a-2b schematically illustrates a second embodiment of the 
graphical user interface according to the present invention; 

Fig 3 illustrate by way of example included and connectable parts of a 

graphical interface system according to an embodiment of the present invention; 

> 

1 5 Fig 4 shows a first embodiment of a portable communication terminal 

on which the graphical user interface of the present invention may be applied; 

Fig 5 shows a second erribodiment of a portable communication 

terminal suitable for use with an embodiment of the graphical user interface 

according to the present invention; and 
20 Figs 6-8 schematically illustrate embodiments for achieving a layered 

graphical effect between different levels of menus. 

Df^.tfliled des cription of preferred embodiments 

As described in claim 1 the graphical user interface of the invention 

25 involves a graphical layer effect for separating sub-menus that are presented in the 
same screen as higher hierarchy menus. Figs la-lc show a graphical user interface 
displaying the main menu 1 "Picture Options". Within that menu there are six 
different menu items 2, of which the second "Send" encloses a sub-menu, indicated 
by the arrow for that item. Scrolling in the menu may be performed by using arrow 

30 keys of a connected key pad, by using a mouse or joy stick, or simply by directly 
marking the selected menu item by use of a suitable tool if the display is touch 
sensitive. A selected menu item is indicated using a selection indicator 7, which in 
figure la is located at the first menu item of menu 1. In figure lb the selection 
indicator 7 is moved down one step to the second menu item "Send" for instance by 

35 any of the aforementioned means for scroUing to or selecting an item. In order to 
activate a selected menu item different solutions may be used. One of those is to use 
a specific key of associated apparatus, such as the "Yes" key of a mobile phone, by 
double clicking on a mouse pointing to a selected item, or using a tool for pressing a 
separate item triggering field 9. Siace, in this case, the selected menu item is the 
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entrance to a sub-menu, the activation of the selected item will xmfold that sub- 
menu. 

Fig 1 c discloses the advantageous way according to the invention of 
displaying a sub-menu 3 within a given main menu 1 . The graphical layer effect of 
5 the invention is used to split up the main menu field ^1 into two parts la and lb, 
between which an imderlying layer 3 comprising the' sub menu is shown. There are 
different ways of using a graphical layer effect for displaying the sub-menu as an 
underlying layer. In one embodiment the contour 5 delimiting the main menu la, lb 
from sub-menu 3 is designed such that a graphical depth is perceived by the viewer. 

10 The graphical layer effect can be seen in figs la-2b but is more clearly illustrates in 
figs 6-8. Fig 6 illustrates an example wherein the graphical layer effect is an 
auxiUary contour 4 presented as a shadow of the contour 5 of the main menu 1 . In 
fig 8 the graphical layer effect is achieved by a shadow 4 projected on the sub-layer 
3 from the overlaying layer of the main menu 1 , whereas fig 7 illustrates an 

1 5 embodiment in which the upper layer 1 is presented £is having a certain thickness 
and therefore a side edge for down towards the lower layer 3 . As a person skilled in 
the art would realise these are merely examples of how the layer effects can be 
presented. 

Another feature useable for presenting the menus at seemingly different 

20 layers are to use roimded comers for the overlying layer 1 . This is visible both in 
figs la-2b and in figs 6-8, wherein 6 denotes a rounded comer in delimiting contour 
5 of the upper layer 1 or la, lb. By viewing a graphical user interface for instance 
as presented in fig Ic, the viewer will automatically perceive layer la, lb as lying 
over layer 3. It should be noted that even though, in the shown embodiments, the 

25 sub-menu is presented as a underlying layer to the main menu, the opposite relation 
could of course also be used, wherein a sub-menu 3 is presented as an overlying 
layer with a graphical layer effect 4, 6 with a shadow or edge feature and/or 
rounded comers of the sub-menu field 3. Instead of using roimded comers, the 
comer portions may be segmented (not shown) such that each comer has an iimer 

30 angle of more than 90°, e.g. in the shape of a diagonally cut off comer. The same 
effect is obtained, wherein the field with rounded or cut off comers will be 
perceived by a viewer as lying on top of a neighbouring field. 

The sub-menu could be closed in any of a number of ways: it can be 
closed when an item is activated, when a user scrolls out of the sub-menu, when the 

35 title is selected and activated, or with another closing function. If the item 2 

containing the sub-menu is at the top of the screen the expansion of the sub-menu is 
preferably downwards, in other words the lower part lb of the main menu 1 sUdes 
downwards to create the gap 3 in which the sub-menu is visualised. However, if the 
item contaioing the sub-menu is at the bottom of the screen, the expansion will 
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preferably be upwards, sliding the upper part la of the main menu upwards. The 
menu list order is however still intact, and the items with highest priority is still 
seen beneath the sub-menu expansion. In the preferred embodiments, as illustrated 
in the figs la-2b, the title of the menu item "send" or "zoom" remains on the screen 
5 in the sub-menu 3 as a heading for the options, which makes it very easy to see to 
which menu item the displayed options belong. 

Figs 2a and 2b show an alternative embodiment to that of fig 1 a- 1 c, 
wherein the submenu of an item 2 contains multiple options for a certain parameter, 
in this case "Zoom". According to this embodiment, the current setting of that 

10 parameter, "50%" in the example of the drawing, is displayed with the menu item 2 
also in the main menu 1 . This information is thus accessible without having to open 
up the submenu field 3, wherein fewer actions are needed to gain desired 
knowledge of the current status. 

Fig 3 discloses a graphical interface system according to an 

15 embodiment of the invention. As display 2 1 is conmumicatively coimected to a 
microprocessor unit 22, which in turn includes at least a computer processor CPU 
and an internal memory MEM. The hardware of the microprocessor imit is fiirther 
associated with a computer program product comprising software for handling the 
presentation of information on the display 2 1 , by use of a graphical user interface 

20 according to the present invention. In order to input data to the microprocessor unit 
22, some form of data input means are preferably connectable thereto, for instance a 
key board or a key pad 23 and/or a cursor control device 24 such as a mouse, a track 
ball or a joy stick. The microprocessor unit 22 may also be connectable to a an 
external memory or database 25, in the embodiment of the communication terminal 

25 such as a mobile phone, memory 25 may be or correspond to a subscriber 

identification module SIM comectable to the terminal. According to the invention, 
the computer program product comprises computer program code which can be 
stored in the memory MEM of the microprocessor unit 22 and which, when 
executed by the microprocessor imit, triggers the microprocessor unit to present a 

30 graphical user interface according to what has been described in relation to figs la- 
2b and figs 6-8, on the display 21. 

Fig 4 shows an example of a portable communication terminal, such as 
a mobile phone 30, of more or less standard appearance. A portable communication 
terminal includes all mobile equipment devised for radio communication with a 

35 radio station, which radio station may also be a mobile terminal or for instance a 
stationary base station. Consequently, the term portable coromunication terminal 
includes mobile phones, pagers, communicators, electronic organizers, smart 
phones, PDA:s (Personal Digital Assistance), vehicle mounted radio 
communication devices or the Like as well as portable laptop computer devised for 
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wireless communication in for instance a WLAN (Wireless Local Area Network). 
Furthermore, since the graphical user interface of the present invention, as such, is 
not restricted to wireless use, it should be noted that the present invention is also 
applicable to standard desktop computers, television sets, fax machines or the like. 
5 The terminal 30 of fig 4 comprises a chassis or housing 3 1, carrying a user audio 
input in the fonn of a microphone 32 and a user audio output in the form of a 
speaker 33 or connected to an earpiece (not shown). A set of keys, buttons or the 
like constitutes a data input interface 23 useable for instance for dialling according 
to the established art. The data output interface comprises a display 2 1 devised to 

10 present commxmication information by use of graphical user interface in accordance 
with the present invention. 

Fig 5 shows a different embodiment of a portable communication 
terminal 30, in which like features carry the same references as in fig 4. A 
difference between embodiments of figs 5 and 4 is mainly that a larger part of the 

1 5 front face of the terminal ia fig 5 is occupied of the display 2 1, to which several of 
the fim.ctions of the key board 23 has been transferred. By pressing directiy on the 
screen of display 2 1, by use of the fingers or a specific tool 34, the nmnber of 
buttons has been decreased and remaining keys are preferably moved to the side or 
sides of the terminal 30. 'Even with the design as illustrated in fig 5, the display 21 

20 will generally be quite small compared to at least a standard desktop computer, and 
consequently the expandable menu system using a graphical layer effect according 
to the present invention will be highly suitable also for future portable terminals as 
that of fig 5. 

The foregoing has described the principles, preferred embodiments and 
25 modes of operation of the present invention. However, the invention should not be 
construed as limited to the particular embodiments discussed. For example, any or 
all of the disclosed embodiments for achieving a graphical depth effect as disclosed 
on figs 6-8 including the use of rounded comers can be used either isolated or in 
combination. Furthermore, the use of a graphical depth effect also on a selection 
30 indicator 7 devised to show which menu item is currentiy selected further increases 
the ease of use, since the selected item will then always appear as a higher layer 
than the cxirrentiy active menu or sub-menu. 

The above described embodiments should be regarded as illustrative 
rather than restrictive, and it should be appreciated that variations may be made in 
35 those embodiments by persons skilled in the arts without departing from the scope 
of the present invention as defined by the following claims. 
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Claims 

1 . A graphical user interface for a display devised for presentation of hierarchical 
information, comprising a first menu field (1) carrying a list of menu items (2), at 
5 least one of said menu items indicating a submenu field which is expandable within 
said first menu field, characterised in that said a graphical layer effect (4) is 
applied to an expanded submenu field such that said submenu field is displayed as 
an underlying layer (3) to the first menu field. 

10 2. The graphical user interface as recited in claim 1, characterised in that for an 
expanded submenu field, located between two menu items, the first menu field is 
displayed as being separated into two first menu fields (1 A, IB) revealing said 
underlying layer there between. 

15 3. The graphical user interface as recited in claim 1 or 2, characterised in that 
said graphical effect comprises the visualisation of an edge (4) between displayed 
layers. 

4. The graphical user interface as recited in claim 1 or 2, characterised in that said 
20 graphical effect comprises the visxialisation of a shadow (4) on an underlying layer 

firom an overlying layer. 

5. The graphical user interface as recited in claun 1 or 2, characterised in that a 
displayed overlying layer is defined by a field (1 A, IB) enclosed by a contour (5) 

25 having rounded comers (6). 

6. The graphical user interface as recited in claim 1 or 2, characterised in that a 
displayed overlying layer is defined by a field (lA, IB) enclosed by a contour (5) 
having comers (6) with an iimer angle of more than 90°. 

30 

7. The graphical user interface as recited iu any of the previous claims, 
characterised in that the menu item for an expanded submenu field is displayed in 
the underlying layer of the submenu field. . 

35 8. The graphical user interface as recited in any of the previous claims, 

characterised in that the parameter headings in said first menu field are arranged in 
an order determined by fi:equency of use. 

9. The graphical user interface as recited in any of the previous claims. 
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characterised in that a selection indicator (7) comprises a contour (8) formed 
arovmd a selected menu item in a list and a graphical layer effect (4) to said contour. 

10. The graphical user interface as recited in claim 9, characterised in that it 

5 comprises an item tiiggering field (9) which can be activated to trigger an action 
associated with a menu item selected by said selection indicator. 

1 1 . A graphical interface system comprising a display connected to a 
microprocessor imit, and a computer program including computer program code 

10 which, when executed by said microprocessor xmit, triggers the microprocessor unit 
to present, on said display, a graphical user interface according to any of the 
previous claims. 

12. A computer program product for a graphical user interface system comprising a 
1 5 microprocessor unit and a display, said computer program product including 

computer program code which, when executed by the microprocessor xmit, triggers 
the microprocessor unit to present, on said display, a graphical user interface 
according to any of the claims 1-10. 

20 13. A portable communication terminal (30) comprising a display (21) and means 
for executing presentation on said display of a graphical user interface according to 
any of the claims 1 - 10. 
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